<template>
  <div class="pro-list">
    <div class="pro-list-head">
      <el-select v-model="value" placeholder="全部">
        <el-option
          v-for="item in classificationlist"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-input
        v-model="input"
        placeholder="请输入查询的关键字..."
        :max="180"
      />
      <el-button type="primary" @click="handlesearchPro">查询</el-button>
    </div>
    <el-table :data="prolists" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="图片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img3"
            :preview-src-list="[
              scope.row.img1,
              scope.row.img2,
              scope.row.img3,
              scope.row.img4,
            ]"
            :initial-index="4"
            fit="cover"
            preview-teleported
            hide-on-click-modal
          />
          <!-- <img :src="scope.row.img3" alt="" /> -->
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="商品名称" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column
        prop="category"
        label="商品类别"
        :filters="classificationlist"
      />
      <el-table-column prop="originprice" label="价格" sortable />
      <el-table-column prop="discount" label="折扣" sortable />
      <el-table-column prop="sales" label="销量" sortable />
      <el-table-column prop="stock" label="库存" sortable />
      <el-table-column label="是否售卖">
        <template #default="{ row }">
          <el-switch
            v-model="row.issale"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-value="1"
            :inactive-value="0"
            @change="handleUpdate(row.proid, 'issale', row.issale)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀">
        <template #default="{ row }">
          <el-switch
            v-model="row.isseckill"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-value="1"
            :inactive-value="0"
            @change="handleUpdate(row.proid, 'isseckill', row.isseckill)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否推荐">
        <template #default="{ row }">
          <el-switch
            v-model="row.isrecommend"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            :active-value="1"
            :inactive-value="0"
            @change="handleUpdate(row.proid, 'isrecommend', row.isrecommend)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev, pager, next,"
        :total="prolist.length"
        v-model:current-page="page"
        v-model:page-size="pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import {
  getcommoditydata,
  classification,
  updateFlag,
  searchPro,
} from "../../api/pro";
import { onMounted, ref, computed } from "vue";
const prolist = ref([]); //数据列表
const page = ref(1);
const pageSize = ref(10);
const classificationlist = ref([]); //分类列表
const value = ref(""); //筛选的分类内容
const input = ref(""); //查询关键字

const prolists = computed(() => {
  return prolist.value.slice(
    (page.value - 1) * pageSize.value,
    page.value * pageSize.value
  );
});
onMounted(() => {
  let obj = {
    category: "",
    search: "",
  };
  searchPro(obj).then((data) => {
    // console.log(data);
    prolist.value = data.data;
    // console.log(prolist.value);
  });
  classification().then((data) => {
    // console.log(data);
    const list = data.data.map((item) => {
      return {
        text: item,
        value: item,
      };
    });
    classificationlist.value = list;
  });
});
function handleUpdate(id, type, flag) {
  // console.log(scope, "scope");
  const obj = {
    proid: id,
    type: type,
    flag: flag,
  };
  // console.log(obj, "obj");
  updateFlag(obj).then((data) => {
    console.log(data);
  });
}
function handlesearchPro() {
  const obj = {
    category: value.value,
    search: input.value,
  };
  //   console.log(obj, "obj");
  searchPro(obj).then((data) => {
    // console.log(data);
    prolist.value = data.data;
  });
}
</script>
<style lang="scss" scoped>
.pro-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  img {
    height: 80px;
  }
  &-head {
    display: flex;
    width: 30%;
    margin-bottom: 20px;
    .el-select,
    .el-input {
      margin-right: 5px;
    }
  }
  .pagination {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .el-table {
    flex: 1;
  }
}
</style>
